<template>
  <div class="shop-div">
    <el-page-header>
      <template #breadcrumb>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ name: 'MyCeHome' }">
            首页
          </el-breadcrumb-item>
          <el-breadcrumb-item :to="{ name: 'ShopList' }"
            >商品管理</el-breadcrumb-item
          >
          <el-breadcrumb-item :to="{ name: 'ShopList' }"
            >商品列表</el-breadcrumb-item
          >
        </el-breadcrumb>
      </template>
      <template #content>
        <span class="text-large font-600 mr-3"> Title </span>
      </template>
    </el-page-header>

    <!-- 搜索 -->
    <main>
      <div class="main-div">
        <div class="mt-4">
          <el-input
            v-model="list.input2"
            placeholder="请输入内容"
            class="input-with-select"
            clearable
          >
            <template #append>
              <el-button :icon="Search" @click="ssShop" />
            </template>
          </el-input>
        </div>
        <el-button type="primary" @click="addShopList">添加商品</el-button>
      </div>
      <!-- 主要内容 -->
      <div class="main-div-2">
        <table cellspacing="0" cellpadding="0">
          <thead>
            <tr>
              <th>&nbsp;</th>
              <th>商品名称</th>
              <th>商品价格(元)</th>
              <th>商品重量</th>
              <th>创建时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in list.rendererList" :key="item.goods_id">
              <td>{{ index + 1 }}</td>
              <td style="width: 600px">{{ item.goods_name }}</td>
              <td>{{ item.goods_price }}</td>
              <td>{{ item.goods_weight }}</td>
              <td>{{ new Date(item.add_time).toDateString() }}</td>
              <td>
                <el-button type="primary">编辑</el-button>
                <el-button type="danger">删除</el-button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 页码 -->
      <div class="demo-pagination-block">
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[1, 2, 5, 10]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="list.listNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </main>
  </div>
</template>

<script setup>
import VueCookies from "vue-cookies";
import axios from "axios";
import { Search } from "@element-plus/icons-vue";
import { ref, reactive, onMounted, watchEffect, onUnmounted } from "vue";
import { Edit, Delete, Star } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
let router = useRouter();

// 页码组件
const currentPage4 = ref(1);
const pageSize4 = ref(10);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);

// 每页显示条数
const handleSizeChange = (val) => {
  console.log(`${val} 每页显示条数`);
  list.itemNum = val;
  axios({
    url: "/api/goods",
    method: "get",
    // 请求头加入token
    headers: {
      Authorization: VueCookies.get("token"),
    },
    params: {
      // 当前页码
      pagenum: list.currentNum,
      // 每页显示条数
      pagesize: list.itemNum,
      // 搜索
      query: list.input2,
    },
  }).then((res) => {
    // 改变总页数
    list.listNum = res.data.data.total;
    list.rendererList = res.data.data.goods;
  });
};
// 当前页数
const handleCurrentChange = (val) => {
  console.log(`当前页数: ${val}`);
  list.currentNum = val;
  axios({
    url: "/api/goods",
    method: "get",
    // 请求头加入token
    headers: {
      Authorization: VueCookies.get("token"),
    },
    params: {
      // 当前页码
      pagenum: list.currentNum,
      // 每页显示条数
      pagesize: list.itemNum,
      // 搜索
      query: list.input2,
    },
  }).then((res) => {
    // 改变总页数
    list.listNum = res.data.data.total;
    list.rendererList = res.data.data.goods;
  });
};
// 搜索
function ssShop() {
  console.log(list.input2);
  axios({
    url: "/api/goods",
    method: "get",
    // 请求头加入token
    headers: {
      Authorization: VueCookies.get("token"),
    },
    params: {
      // 当前页码
      pagenum: list.currentNum,
      // 每页显示条数
      pagesize: list.itemNum,
      // 搜索
      query: list.input2,
    },
  }).then((res) => {
    // 改变总页数
    list.listNum = res.data.data.total;
    list.rendererList = res.data.data.goods;
  });
}

let list = reactive({
  input2: "",
  // 总页数
  sumNum: 0,
  // 每页显示条数
  itemNum: pageSize4.value,
  // 当前页数
  currentNum: currentPage4.value,
  // 学生列表
  listNum: 0,
  // 渲染数据
  rendererList: [],
});
// 添加商品
function addShopList() {
  router.push({
    name: "AddShopList",
  });
  
  


}

onMounted(() => {
  axios({
    url: "/api/goods",
    method: "get",
    // 请求头加入token
    headers: {
      Authorization: VueCookies.get("token"),
    },
    params: {
      // 当前页码
      pagenum: list.currentNum,
      // 每页显示条数
      pagesize: list.itemNum,
    },
  }).then((res) => {
    // 改变总页数
    list.listNum = res.data.data.total;
    list.rendererList = res.data.data.goods;
    console.log(list.rendererList);
  });
});
</script>

<style scoped>
.shop-div {
  flex-grow: 1;
  height: auto;
  padding: 20px;
}
/* 搜索 */
main {
  flex-grow: 1;
  height: auto;
  background-color: white;
  border-radius: 10px;
  padding: 15px;
  position: relative;
}
.main-div {
  width: 470px;
  height: 50px;
  display: flex;
  justify-content: space-between;
}
.main-div >>> .el-input__inner {
  width: 300px;
  font-size: 16px !important;
  position: relative;
}
.main-div >>> .el-input__suffix {
  position: absolute;
  right: 10px;
}
.main-div >>> button {
  height: 50px;
}
.main-div-2 {
  width: 100%;
  height: auto;
  margin: 10px 0px;
}

tr,
td,
th {
  border: 1px solid;
  padding: 10px;
}
table {
  width: 100%;
  height: 50px;
  border: 1px solid;
}
thead {
  width: 100%;
  height: 50px;
  border: 1px solid;
}
</style>